<template>
	<div class="page1">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>系统用户管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<h2 class="title">
				<div class="title_icon">						
				</div>
				添加/修改功能
			</h2>
			<!--搜索条件区域-->
			<div class="searchWrapper">
				
						<el-form label-position="right" label-width="100px" :model="formInline" style="width: 440px;" :rules="rules" :ref="'form'">
							<el-form-item label="区域级别" prop="areaLevel">								
								<el-select v-model.trim="formInline.areaLevel" filterable placeholder="">
									<el-option label="行政区" value="2"></el-option>
									<el-option label="城市" value="1"></el-option>
									<el-option label="虚拟区域" value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="城市名称" prop="cityName">
								<!--<el-cascader :options="options" v-model.trim="selectedOptions" :props="defaultProps" @active-item-change="handleItemChange" filterable></el-cascader>-->
								<el-cascader
  :options="options"
  @active-item-change="handleItemChange"
  :props="defaultProps"
  v-model.trim="formInline.cityId"
  @change="handleItemChange"
></el-cascader>
							</el-form-item>
							<el-form-item label="上级区域" prop="parentId">
								<el-select v-model.trim="formInline.parentId" filterable placeholder="">
									<el-option label="请选择" value=""></el-option>
									<el-option v-for="item in parentList" :label="item.areaName" :value="item.areaId"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="区域名称" prop="areaName">
								<el-input v-model.trim="formInline.areaName"></el-input>	
							</el-form-item>
							<el-form-item label="区域编码" prop="areaCode">								
								<el-input v-model.trim="formInline.areaCode"></el-input>									
							</el-form-item>
							<el-form-item label="区域类型">
								<el-select v-model.trim="formInline.areaType" filterable placeholder="">
									<el-option label="实体区域/收费员关联区域" value="0"></el-option>
									<el-option label="虚拟区域/运维人员关联区域" value="1"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="描述">
								<el-input v-model.trim="formInline.description"></el-input>
							</el-form-item>
						</el-form>
				<div style="text-align: center; margin-top: 20px; ">
					<el-button type="primary" @click="submitData" style="width: 88px;">提交</el-button>
					<el-button type="" @click="$router.replace({path: '/funcManage'})" style="width: 88px;">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getData
	} from '../../common/js/public.js'
	export default {
		name: 'hello',
		data () {
			return {	
				selectedOptions: [],
				options: [],
				cityList: [],
				defaultProps: {
					label: 'cityName',
					value: 'cityId'
				},
				isEdit: false,
				parentList: [],
				formInline: {
					areaCode: '',
					areaLevel: '2',
					areaName: '',
					areaType: '0',
					cityName: 'menu',
					description: '',
					parentId: '',
					cityId: []
				},
				rules: {
					cityName: [{
						required: true,
						message: '请输入功能名称',
						trigger: 'blur'
					}],
					parentId: [{
						required: true,
						message: '请选择上级区域',
						trigger: 'blur'
					}],
					areaName: [{
						required: true,
						message: '请输入区域名称',
						trigger: 'blur'
					}],
					areaCode: [{
						required: true,
						message: '请输入区域编码',
						trigger: 'blur'
					}],
					areaLevel: [{
						required: true,
						message: '请输入功能名称',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {	
			queryDetail () {				
				let opt = {
					url: '/gplus/resource/queryList',
					data: {
						"resourceId": this.$route.query.resourceId
					},
					success: (res) => {
						for (let i in this.formInline) {							
							this.formInline[i] = res.data.ResourceVO[0][i].toString();
						}
						console.log(this.formInline)
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			getParent () {
				let opt = {
					url: '/gplus/area/queryList',
					data: {
						"areaName": "",
						"cityId": this.formInline.cityId,
						"areaLevel": this.formInline.areaLevel
					},
					success: (res) => {
						this.parentList = res.data.AreaVO;
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			getCityData (cityType, upId) {
				let opt = {
					url: '/gplus/city/queryList',
					data: {
						"cityType": cityType,
						"upId": upId
					},
					success: (res) => {
						this.cityList = res.data.CityVO;
						this.options = this.cityList;
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			handleItemChange (val) {
		        console.log('active item:', val);
		        this.getCityData('', val[0]);
		      },
			addList () {
				this.formInline.cityId = this.formInline.cityId[this.formInline.cityId.lenth - 1];
				let opt = {
					url: !this.isEdit ? '/gplus/area/add' : '/gplus/area/update',
					data: this.formInline,
					success: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						}).then(() => {
							this.$router.replace({
								path: 'funcManage'
							});
						});
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			submitData () {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.addList();
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}			
		},
		components: {},
		mounted () {
			this.getCityData("0", "");
			this.getParent();
			if (this.$route.query.resourceId) {		
				this.isEdit = true;
				this.queryDetail();
			}
		},
		computed: {
		}
	}
</script>	
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	border: 1px solid #C0CCDA;
	border-radius: 4px;
	padding: 20px;
</style>
